<template>
  <!-- 最大盒子 -->
    <s-layout :tabbarshow="false" id="layout" navbar="normal" :title="''" :autoBack="true" leftIconColor="$uni-text-color" :bgColor="'rgba(0,0,0,0)'" :onShareAppMessage="shareInfo">
      <view class="max_box" :style="{ backgroundImage: `url(${baseUrl}/uploads/uniapp_image/user_v1/yaoqingtongshibg.PNG)`,paddingTop: safeAreaInsets?.top + 'px',height:`calc(100vh - ${safeAreaInsets?.top}px)`}">
        <view class="modal_box">
          <view class="modal_title">邀请设置</view>
          <view class="text_red">*请谨慎选择，您需要邀请同事！</view>
          <scroll-view scroll-y>
            <fui-form ref="formRole" top="0" :model="formData" :show="false" :errorPosition="2" :errorAlign="'left'">
                <!-- 选择部门 -->
                <fui-form-item :labelWidth="180" :labelSize="26" :bottomBorder="false" :asterisk="true" label="公司：" prop="department_id">
                  <fui-input 
                    textAlign="right" :borderBottom="false" :padding="[0]" :size="26" :clearable="false" type="text" disabled @tap="select_department" :disabledColor="'#F9FAFF'" placeholder="请选择公司" v-model="project" border="none"
                  >
                  </fui-input>
                </fui-form-item>
            <!-- 选择角色-->
              <fui-form-item :labelWidth="180" :labelSize="26" :bottomBorder="false" :asterisk="true" label="角色：" prop="role">
                    <fui-input 
                      textAlign="right" :borderBottom="false" :padding="[0]" :size="26" :clearable="false" type="text" disabled @tap="select_role" :disabledColor="'#F9FAFF'" placeholder="请选择角色" v-model="rolelist" border="none"
                    >
                    </fui-input>
                </fui-form-item>
              <!-- 合同年限 -->
              <fui-form-item :labelWidth="180" :labelSize="26" :bottomBorder="false" :asterisk="true" label="合同年限：" prop="year">
                <fui-input 
                  textAlign="right" :borderBottom="false" :padding="[0]" :size="26" :clearable="false" type="text" disabled @tap="contract_term" :disabledColor="'#F9FAFF'" placeholder="请选择合同年限" v-model="formData.year" border="none"
                >
                </fui-input>
              </fui-form-item>
              <!-- 工作地点 -->
              <fui-form-item :labelWidth="180" :labelSize="26" :bottomBorder="false" :asterisk="true" label="城市：" prop="city">
                <fui-input 
                  textAlign="right" :borderBottom="false" :padding="[0]" :size="26" :clearable="false" type="text" disabled @tap="select_city" :disabledColor="'#F9FAFF'" placeholder="请选择城市" v-model="formData.city" border="none"
                >
                </fui-input>
              </fui-form-item>
           
              <!-- 试用期 开始 - 结束 -->
              <fui-form-item :labelWidth="200" :labelSize="26" :bottomBorder="false" :asterisk="true" label="试用期合同结束日期：" prop="probation_start">
                <fui-input textAlign="right" :borderBottom="false" :padding="[0]" :size="26" :clearable="false" disabled @tap="probationary_period" type="text" :disabledColor="'#F9FAFF'" v-model="probationary" placeholder="请选择试用期合同结束日期" 
                border="none">
                </fui-input>
              </fui-form-item>
              <!-- 工作岗位 -->
              <fui-form-item :labelWidth="180" :labelSize="26" :bottomBorder="false" :asterisk="true" label="工作岗位：" prop="position">
                <fui-input 
                  textAlign="right" :borderBottom="false" :padding="[0]" :size="26" :clearable="false" type="text" :disabledColor="'#F9FAFF'" placeholder="请输入工作岗位" v-model="formData.position" border="none"
                >
                </fui-input>
              </fui-form-item>
             
              <!-- 工资 -->
              <fui-form-item :labelWidth="180" :labelSize="26" :bottomBorder="false" :asterisk="true" label="工资：" prop="salary">
                <fui-input 
                  textAlign="right" :borderBottom="false" :padding="[0]" :size="26" :clearable="false" type="text" :disabledColor="'#F9FAFF'" placeholder="请输入工资" v-model="formData.salary" border="none"
                >
                </fui-input>
              </fui-form-item>
              <!-- 试用期工资 -->
              <fui-form-item :labelWidth="180" :labelSize="26" :bottomBorder="false" :asterisk="true" label="试用期工资：" prop="probation_salary">
                <fui-input 
                  textAlign="right" :borderBottom="false" :padding="[0]" :size="26" :clearable="false" type="text" :disabledColor="'#F9FAFF'" placeholder="请输入试用期工资" v-model="formData.probation_salary" border="none"
                >
                </fui-input>
              </fui-form-item>
            </fui-form>
             <!-- 签署等级表 -->
             <fui-form-item :labelWidth="350" :labelSize="26" :bottomBorder="false" :asterisk="true" label="签署电子入职登记表：" prop="is_enrollment">
              <fui-radio-group  @change="is_enrollment_change">
                <view class="fui-list__item">
                  <fui-label v-for="(item,index) in radioItems" :key="index" >
                      <view class="fui-list__cell">
                        <fui-radio :checked="item.checked" :value="item.value" borderRadius="30rpx"
                        >
                        </fui-radio>
                        <text class="fui-text">{{item.name}}</text>
                      </view>
                  
                  </fui-label>
                </view>
              </fui-radio-group>
              </fui-form-item>
               <!-- 是否签署电子劳务合同。0=否，1=是 -->
             <fui-form-item :labelWidth="350" :labelSize="26" :bottomBorder="false" :asterisk="true" label="签署电子劳务合同：" prop="is_contact">
              <fui-radio-group  @change="is_contact_change">
                <view class="fui-list__item">
                  <fui-label v-for="(item,index) in radioContactItems" :key="index" >
                      <view class="fui-list__cell">
                        <fui-radio :checked="item.checked" :value="item.value" borderRadius="30rpx"
                        >
                        </fui-radio>
                        <text class="fui-text">{{item.name}}</text>
                      </view>
                  
                  </fui-label>
                </view>
              </fui-radio-group>
              </fui-form-item>
          </scroll-view>
        </view>
        <view class="button_text">
          <view class="button" @tap="generate">生成邀请海报</view>
        </view>
      </view>
    </s-layout>
    <!-- 底部弹出组件 && 部门弹出 -->
    <s-project-class @selectedData="switchTitle" @subcomponentSearch="subcomponentSearch" :arrayList="projectDataList" ref="popupListRef" :searchBoxIsShow="false" :showGoLink="false"></s-project-class>
    <!-- 选择工作地点 && 弹出 -->
    <up-picker :defaultIndex="[7,0]" :show="workplace_show" :closeOnClickOverlay="true" ref="workplace_Ref" :columns="workplace_columns" @close="workplace_close" @confirm="workplace_confirm" @change="workplace_changeHandler" @cancel="workplace_cancel"></up-picker>
    <!-- 选择合同年限 && 弹出 -->
    <fui-picker :options="age_limit_options" :show="age_limit_show" @change="age_limit_change" @cancel="age_limit_cancel"></fui-picker>
    <!-- 选择试用期 && 弹出 -->
    <fui-date-picker :show="show_scope" range type="3" :minDate="time.minDate" :maxDate="time.maxDate" @change="confirm_scope" @cancel="close_scope" ></fui-date-picker>
    <!-- 选择角色 && 弹出 -->
    <fui-picker :layer="1" :linkage="true" :fields="['name', 'id']" :options="group_options" :show="role_limit_show" @change="role_limit_change" @cancel="role_limit_cancel"></fui-picker>
</template>

<script setup>
  import { ref,computed, reactive } from "vue";
  import { baseUrl } from "@/sheep/config";
  import sheep from '@/sheep';
  const { safeAreaInsets } = uni.getSystemInfoSync()
  import { showShareModal, showAuthModal } from '@/sheep/hooks/useModal';
  import { onLoad } from "@dcloudio/uni-app";
  import { province,city } from './city.js'
  const role_limit_show =ref(false) 
  const group_options =ref([])
  const rolelist = ref()
  const role_limit_change=(e)=> {
		role_limit_show.value = false
    formData.group_id = e.value
    rolelist.value = e.text
		console.log(e)
	}
  const select_role =()=>{
    role_limit_show.value = true
  }
  const  role_limit_cancel=() =>{
    role_limit_show.value = false
	}
  onLoad(() => {
    let params= {
      is_daily_yield:'0',
      is_all:'1',
      is_include_main:'1'
    }
    projectList(params)
    getUserGroup()
    
  })
  // 获取员工分组角色

  const getUserGroup = ()=>{
    let params ={
      filter: JSON.stringify({
            id: '1,3,8,9,10,11,13',
        }),
        op: JSON.stringify({
            id:'not in',
        }),
    }
   sheep.$api.user.getUserGroup(params).then(res => {

        if(res.code == 1) {
          group_options.value= res.data
        
          
        }
        })
     

  }
  

  const formData =  reactive({
    year:'',            // 合同年限
    group_id:'',      //角色
    city:'',            // 工作地点
    department_id:'',//邀请id
    probation_start:'', // 试用期-开始
    probation_end:'',   // 试用期-结束
    position:'',        // 工作岗位
    salary:'',      // 工资
    probation_salary:'',// 试用期工资
    is_enrollment:'1',//邀请同事 默认填写入职申请
    is_contact:'1'//是否签署电子劳务合同。0=否，1=是

  })
	const radioItems=ref([
        
          {
						name: '是',
						value: '1',
						checked: true
					},  {
						name: '否',
						value: '0',
						checked: false
					}
					
				])
  const  is_enrollment_change=(e)=> {
    formData.is_enrollment =  e.detail.value

  }
//是否签合同
const radioContactItems=ref([
          {
						name: '是',
						value: '1',
						checked: true
					},  {
						name: '否',
						value: '0',
						checked: false
					}
					
				])
      const  is_contact_change=(e)=> {
        formData.is_contact =  e.detail.value
			
			}
  // 表单验证
const rules = [
{
      name: "department_id",
      rule: ["required"],
      msg: ["请选择公司"]
    },
    {
      name: "group_id",
      rule: ["required"],
      msg: ["请选择角色"]
    },
  {
    name: "year",
    rule: ["required"],
    msg: ["请选择合同年限"]
  },
  {
    name: "city",
    rule: ["required"],
    msg: ["请选择工作地点"]
  },
  
  {
    name: "probation_start",
    rule: ["required"],
    msg: ["请选择试用期"],
  },
  {
    name: "position",
    rule: ["required"],
    msg: ["请输入工作岗位"]
  },
  {
    name: "probation_salary",
    rule: ["required"],
    msg: ["请输入试用期工资"]
  },
  {
    name: "salary",
    rule: ["required"],
    msg: ["请输入工资"]
  }
]

const formRole = ref()


  const time = reactive({
    minDate:'',
    maxDate:'',
    monthNum:'13',
    intraday:[]
  })

  // 设置默认日期，最大值为今天，最小值为去年今天
let date = new Date();
let year = date.getFullYear();
let month = date.getMonth() + 1;
let day = date.getDate();
if (month <= 9) {
    month = '0' + month;
}
if (day <= 9) {
    day = '0' + day;
}
let minyear = year - 1;
time.minDate = year + '-' + month + '-' + day;
time.maxDate = (year + 1) + '-01-01';
time.intraday = [year + '-' + month + '-' + day]

// 试用期
const show_scope = ref(false)
const probationary = ref()
const probationary_period = () => {
  show_scope.value = true
}
const confirm_scope = (e) => {
  formData.probation_start = e.startDate.result
  formData.probation_end = e.endDate.result
  probationary.value = `${e.startDate.result} - ${e.endDate.result}`
  close_scope()
}
const close_scope = () => {
  show_scope.value = false
}



  // 生成邀请劳务派遣海报
  const ids = ref()
  function generate() {
    // console.log('表单数据',formData);
    uni.$u.throttle(() => {
      formRole.value.validator(formData, rules,true).then(async res => {
        if(res.isPassed) {
          const resust = await sheep.$api.app.Post_entryinfo_invite_info(formData);
          ids.value = resust.data.ids
          if(resust.code == 1) {
            sheep.$helper.toast(resust.msg);
            setTimeout(function () {
              showShareModal();
              // sheep.$router.back()
            }, 500);
          } else {
            sheep.$helper.toast(resust.msg);
          }

        } else {
          sheep.$helper.toast('请仔细核对内容！');
        }
      }).catch((err) => {
        console.log(err);
      });
    }, 500)
  }
// 分享同事
const shareInfo = computed(() => {
return sheep.$platform.share.getShareInfo(
  {
    title: '',
    desc:'',
    params: {
      page: '2',
      query: `${ids.value}`,
    },
  },
  {
    type: 'Invite_colleagues', // 邀请同事海报

  },
);
})

    // 切换部门
    const project = ref()
    const popupListRef = ref()
   

    const select_department = () => {
      popupListRef.value.open()
    }

    const switchTitle = (item) => {
      project.value = item.jointTitles
      formData.department_id = item.id
    }
    // 调用接口：获取项目列表
    const projectDataList = ref([])

    // 封装项目列表接口
    const projectList = async (params = null) => {
      const res = await sheep.$api.app.getDepartment(params);
      projectDataList.value = res.data;
    };
 
  // 选择城市
  const workplace_Ref = ref(null)
  const workplace_show = ref(false)
  const workplace_columns = ref([province,city[7]]);
  const workplace_columnData = ref(city)
  const select_city = () => {
    workplace_show.value = true
  }
      // 关闭
  const workplace_close = () => {
    workplace_show.value = false
  }
      // 确定
  const workplace_confirm = (e) => {
    formData.city = e.value[1]
    workplace_close()
  };
      // 取消
  const workplace_cancel = () => {
    workplace_close()
  }
      // 根据一级联动切换二级联动
  const workplace_changeHandler = (e) => {
    const { columnIndex, value, values, index } = e;
    if (columnIndex === 0) {
      workplace_Ref.value.setColumnValues(1, workplace_columnData.value[index]);
    }
  };

  // 选择年限
  const contract_term = () => {
    age_limit_show.value = true
  }
  const age_limit_options = ref(['1','2','3','4','5','6','7','8','9','10'])
  const age_limit_show = ref(false)
  const age_limit_change = (e) => {
    age_limit_show.value = false
    formData.year = e.text
  }

  const age_limit_cancel = () => {
    age_limit_show.value = false
  }

</script>

<style lang="scss" scoped>
  .max_box {
    position: relative;
    background-size: cover;
    background-position: center;
    padding: 0 40rpx;
  }

  .modal_box {
    padding: 40rpx 26rpx 40rpx 26rpx;
    height: 740rpx;
    border-radius: 20px;
    background-color: #FFFFFF;
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.05);
    margin: 540rpx auto 0 auto;
    scroll-view {
      width: 100%;
      height: calc(100% - 174rpx);
    }
  }

  .modal_title {
    margin: 0 auto 40rpx auto;
    font-family: HelloFont-WenYiHei;
    color: #333333;
    font-weight: 700;
    font-size: 44rpx;
    font-style: normal;
    text-decoration: none;
    text-align: center;
  }

  .Select_unchecked {
    border-radius: 24px;
    border: 2px solid #999999;
    height: 88rpx;
    font-family: PingFangSC;
    color: #999999;
    font-weight: 600;
    font-size: 26rpx;
    font-style: normal;
    text-decoration: none;
    text-align: left;
    line-height: 88rpx;
    padding: 0 40rpx;
    margin-bottom: 40rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    image {
      width: 40rpx;
      height: 40rpx;
    }
  }

  .Select_checked {
    border-radius: 24px;
    border: 2px solid #0038F7;
    height: 88rpx;
    font-family: PingFangSC;
    color: #0038F7;
    font-weight: 600;
    font-size: 26rpx;
    font-style: normal;
    text-decoration: none;
    text-align: left;
    line-height: 88rpx;
    padding: 0 40rpx;
    margin-bottom: 40rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    image {
      width: 40rpx;
      height: 40rpx;
    }
  }



  .text_top {
    font-family: PingFangSC;
    color: #666666;
    font-weight: 400;
    font-size: $uni-font-size-big;
    font-style: normal;
    text-decoration: none;
    text-align: center;
  }

  .text_bottom {
    font-family: PingFangSC;
    color: #666666;
    font-weight: 400;
    font-size: $uni-font-size-big;
    font-style: normal;
    text-decoration: none;
    text-align: center;
    margin-bottom: 100rpx;
  }

  .button_text {
      margin-top: 20rpx;
    .button {
      margin: 0 auto;
      height: 90rpx;
      line-height: 90rpx;
      font-family: PingFangSC;
      color: #FFFFFF;
      font-weight: 500;
      font-size: $uni-font-size-big;
      font-style: normal;
      text-decoration: none;
      text-align: center;
      border-radius: 25px;
      background: linear-gradient(90deg, rgba(0, 56, 247, 1) 0%, rgba(77, 139, 255, 1) 100%);
    }
  }

  .text_red {
    font-family: PingFangSC;
    color: #FF0000;
    font-weight: 600;
    font-size: 26rpx;
    font-style: normal;
    text-decoration: none;
    text-align: center;
    margin-bottom: 40rpx;
  }
.fui-list__item{
		display: flex;
		align-items: center;
    justify-content: flex-end;
    .fui-text {
		font-size: 26rpx;
		padding-left: 16rpx;
    margin-right: 20rpx;
	}
}
:deep(.fui-form__wrap){
  text-align: right;
}
</style>